<template>
  <div>
    <div class="fundManagement">
      <div class="title">
        <p>资金管理</p>
      </div>
      <div class="main">
        <div class="mainUser">
          <span class="user"> 您好,{{ name }} </span>
          <span class="balance">
            <p>余额:</p>
            <p>￥{{ balance }}</p>
            <p>
              <el-link
                type="primary"
                style="cursor: pointer"
                @click="showModal('balanceDetail')"
                :underline="false"
              >
                详情
              </el-link>
            </p>
          </span>
          <span class="integral">
            <p>积分:</p>
            <p>{{ integral }}</p>
            <p>
              <el-link
                type="primary"
                style="cursor: pointer"
                @click="showModal('integralDetail')"
                :underline="false"
              >
                详情
              </el-link>
            </p>
          </span>
        </div>
        <!-- 弹框 -->
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="50%"
        >
          <!-- 余额的明细 -->
          <span v-if="currentDetail === 'balanceDetail'">
            <el-tabs
              v-model="activeNameBalance"
              @tab-click="handleClickBalacne"
            >
              <el-tab-pane label="余额收入" name="2"> </el-tab-pane>
              <el-tab-pane label="余额支出" name="1"> </el-tab-pane>
              <el-table :data="balanceList" border style="width: 100%">
                <el-table-column
                  prop="balanceBefore"
                  label="改变前余额"
                  align="center"
                  min-width="100"
                >
                  <template slot-scope="{ row }">
                    {{ row.balanceBefore / 100 }}
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="isExpense"
                  prop="consumeAmount"
                  label="改变余额"
                  align="center"
                  min-width="100"
                >
                  <template slot-scope="{ row }">
                    {{ row.consumeAmount / 100 }}
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="isRecharge"
                  prop="rechargeAmount"
                  label="改变金额"
                  align="center"
                  min-width="100"
                >
                  <template slot-scope="{ row }">
                    {{ row.rechargeAmount / 100 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="balance"
                  label="余额"
                  align="center"
                  min-width="100"
                >
                  <template slot-scope="{ row }">
                    {{ row.balance / 100 }}
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="isRecharge"
                  prop="rechargeWay"
                  label="方式"
                  min-width="100"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <p>
                      {{
                        row.rechargeWay == 1
                          ? "微信充值"
                          : row.rechargeWay == 2
                          ? "支付宝充值"
                          : row.rechargeWay == 4
                          ? "广告充值"
                          : row.rechargeWay == 5
                          ? "取消返还"
                          : ""
                      }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="isExpense"
                  prop="rechargeWay"
                  label="方式"
                  min-width="100"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <p>
                      {{ row.rechargeWay == 3 ? "购物消费" : "" }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createAt"
                  label="创建时间"
                  align="center"
                  min-width="180"
                >
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="balancePagetion.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="balancePagetion.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="balancePagetion.total"
              >
              </el-pagination>
            </el-tabs>
          </span>
          <!-- 积分的明细 -->
          <span v-else-if="currentDetail === 'integralDetail'">
            <el-tabs v-model="activeName" @tab-click="handleClickIntegral">
              <el-tab-pane label="积分收入" name="1"></el-tab-pane>
              <el-tab-pane label="积分支出" name="2"></el-tab-pane>
              <el-table :data="changeValueList" border style="width: 100%">
                <el-table-column
                  prop="orderCode"
                  label="订单号"
                  align="center"
                  min-width="180"
                >
                  <template slot-scope="{row}">
                    {{ row.orderCode }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="changeValue"
                  label="积分"
                  align="center"
                  min-width="100"
                >
                  <template slot-scope="{row}">
                    {{ row.changeValue }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="changeType"
                  label="类型"
                  min-width="100"
                  align="center"
                >
                  <template slot-scope="{ row }">
                    <p>
                      {{
                        row.changeType == 1
                          ? "支付增加"
                          : row.changeType == 2
                          ? "取消减少"
                          : row.changeType == 3
                          ? "消费减少"
                          : ""
                      }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="operatorTime"
                  label="时间"
                  align="center"
                  min-width="180"
                >
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @size-change="handleSizeChangeIntegral"
                @current-change="handleCurrentChangeIntegral"
                :current-page="integralPagetion.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="integralPagetion.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="integralPagetion.total"
              >
              </el-pagination>
            </el-tabs>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userDetail,
  getIntegral,
  getIntegralDetail,
  getBalance,
  getBalanceDetail,
} from "@/api/mallApi/funManagement/funManagement";

export default {
  name: "FundManagement",

  data() {
    return {
      dialogVisible: false,
      activeName: "1",
      activeNameBalance: "1",
      input: "",
      name: "",
      currentDetail: "",
      changeValueList: [],
      integral: "", //积分
      balance: "", //余额
      balanceList: [],
      integralPagetion: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      balancePagetion: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    dialogTitle() {
      return this.currentDetail === "balanceDetail" ? "余额明细" : "积分明细";
    },
    // 判断是否为消费类型
    isExpense() {
      return this.balanceList.some((item) => item.type === 1);
    },
    // 判断是否为充值类型
    isRecharge() {
      return this.balanceList.some((item) => item.type === 2);
    },
  },

  mounted() {
    this.getUser();
    this.getIntegralList();
    this.getIntegralDetailList();
    this.getUserBalance();
    this.getUserBalanceDetail();
  },
  methods: {
    //获取用户名字
    getUser() {
      userDetail({ id: this.$store.state.user.userId }).then((res) => {
        this.name = res.data.name;
      });
    },
    //获取用户积分
    getIntegralList() {
      const data = {
        userId: this.$store.state.user.userId,
      };
      getIntegral(data).then((res) => {
        this.integral = res.data.integral;
      });
    },
    //获取用户积分明细
    getIntegralDetailList() {
      const data = {
        userId: this.$store.state.user.userId,
        pageSize: this.integralPagetion.pageSize,
        pageNo: this.integralPagetion.pageNo,
        type: this.activeName,
      };
      getIntegralDetail(data).then((res) => {
        this.changeValueList = res.data.list;
        this.integralPagetion.total = Number(res.data.total);
        this.integralPagetion.pageSize = res.data.pageSize;
      });
    },
    //获取用户余额
    getUserBalance() {
      getBalance({ userId: this.$store.state.user.userId }).then((res) => {
        this.balance = res.data.accountBalance;
      });
    },
    //获取用户余额明细
    getUserBalanceDetail() {
      const data = {
        id: this.$store.state.user.userId,
        pageSize: this.balancePagetion.pageSize,
        pageNo: this.balancePagetion.pageNo,
        type: this.activeNameBalance,
      };
      getBalanceDetail(data).then((res) => {
        this.balanceList = res.data.rows;
        this.balancePagetion.total = res.data.totalRows;
      });
    },
    showModal(detailType) {
      this.dialogVisible = true;
      this.currentDetail = detailType;
    },
    //余额页码变数
    handleSizeChange(val) {
      this.balancePagetion.pageSize = val;
      this.getUserBalanceDetail();
    },
    handleCurrentChange(val) {
      this.balancePagetion.pageNo = val;
      this.getUserBalanceDetail();
    },
    //积分页码变数
    handleSizeChangeIntegral(val) {
      this.integralPagetion.pageSize = val;
      this.getIntegralDetailList();
    },
    handleCurrentChangeIntegral(val) {
      this.integralPagetion.pageNo = val;
      this.getIntegralDetailList();
    },
    handleClickIntegral() {
      this.changeValueList = [];
      this.integralPagetion.pageNo = 1;
      this.getIntegralDetailList();
    },
    handleClickBalacne() {
      this.balanceList = [];
      this.balancePagetion.pageNo = 1;
      this.getUserBalanceDetail();
    },
  },
};
</script>
<style scoped lang="scss">
.fundManagement {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #fff;
  height: 1041px;
  .title {
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    background: #fff;
    height: 62px;
    line-height: 62px;
    border-bottom: 1px solid #e9e9e9;

    p {
      margin-left: 24px;
    }
  }
  .main {
    margin-top: 20px;
    .mainUser {
      width: 500px;
      height: auto;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      .user {
        font-size: 25px;
        display: flex;
      }
      .balance {
        display: flex;
        font-size: 22px;
        margin-bottom: -30px;
        p {
          padding: 0 5px;
        }
        :nth-child(2) {
          color: rgb(152, 32, 32);
        }
      }
      .integral {
        font-size: 22px;
        display: flex;
        p {
          padding: 0 5px;
        }
      }
    }
  }
  ::v-deep .el-tabs__item {
    font-size: 20px;
  }
}
</style>